<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <script src="../../assets/vue.js"></script>
</head>
<body>
    <div id="root">
        name is {{name}}
        <p><input type="text" v-model="name"></p>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                name: 'name'
            },
            beforeCreate: function() {
                console.log("======创建前======")
                console.log(this.name)
                console.log(this.$el)
            },
            created: function() {
                // 在实例创建之后同步调用
                // 此时实例已结束解析选项
                // 已建立：数据绑定，计算属性，方法，监听
                // 还没开始DOM编译，$el还不存在，但是实例存在
                console.log("=====已创建=====")
                console.log(this.name)
                console.log(this.$el)
            },
            beforeMount: function() {
                console.log("===== Mount之前 =====")
                console.log(this.name)
                console.log(this.$el)
            },
            mounted: function() {
                console.log("=====Mount完成=====")
                console.log(this.name)
                console.log(this.$el)
            },
            beforeUpdate: function() {
                // 数据更新时调用，发生在虚拟 DOM 打补丁之前
                console.log("=====更新之前=====")
                const name = this.name
                console.log(name)
                console.log(this.$el.innerText)
            },
            updated: function () {
                // 组件 DOM 已经更新
                console.log('===== 更新完成 =====')
                console.log(this.name)
                console.log(this.$el)
            },
            beforeDestroy: function() {
                // 实例销毁之前调用。
                // 在这一步，实例仍然完全可用
                console.log("=====销毁前=====")
                console.log(this.name)
                console.log(this.$el)
            },
            destroy: function() {
                console.log("=====已销毁=====")
                console.log(this.name)
                console.log(this.$el)
            }
        })
    </script>
</body>
</html>